<template>
	
<view class="">
	<view class="tasks">
		<view class="task" v-for="(item, index) in lists" :key="index" v-if="!item.is_received">
			<view class="top">
				<view class="icon" @tap="toUserMain(item.user_id)">
					<image :src="item.user_icon" mode=""></image>
				</view>
				<view class="user-info">
					<view class="user-name">
						<text>{{item.user_name}}</text>
					</view>
					<view class="time">
						<text>{{item.time}}</text>
					</view>
				</view>
				<view class="address">
						<view class="">
							<text>{{item.address}}</text>
						</view>
						<view class="">
							<text>电话：{{item.phone}}</text>
						</view>
						
				</view>
			</view>
			<view class="middle">
				<view class="content">
					<text>{{item.content}}</text>
				</view>
				<view class="gain">
					¥{{item.reward}}
				</view>
			</view>
			<view class="bottom">
				<button type="default" @tap="receive(item._id,index)">接单</button>
			</view>
		</view>
	</view>


	  <button type="default" class="publish-task" @tap="toPublishTask">+</button>
</view>



</template>

<script>
	import store from '../../globalStore/store.json'
	export default {
		data() {
			return {
				  // end 

				 user_data:"",
				  // 导航条end
				  lists:[],


				  page:1,
				  page_size:10
				  //end
			}
		},

		onLoad:function(){
			this.getTasks(this.page,this.page_size);
			this.user_data=store.user;
		},
		onShow:function(){
			uni.setNavigationBarTitle({
				title:"任务"
			})
			uni.setTabBarBadge({
			  index: 3,
			  text: store.chats_count.toString()
			})
			
		},
		
		//下拉刷新
		onPullDownRefresh:function() {
			//模拟加载完成
			this.page=1;
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2220);

			this.lists=[];
			this.getTasks(this.page,this.page_size);
		},
		//上拉刷新
		onReachBottom:function(){
			this.page++;

			this.getTasks(this.page,this.page_size);
			
		},
		methods: {
			toPublishTask(){
				uni.navigateTo({
					url:"/pages/task/publish-task/publish-task"
				})
			},
			 toUserMain(id){
				 uni.navigateTo({
				 	url:'../user-detail/user-detail?user_id='+id
				 })
			 },
			 receive(_id, index){
				 console.log(this.lists[index]);
				 var that=this;
				 uni.showLoading({
				 	title:"接单中"
				 })
				 uniCloud.callFunction({
				 	name:"receiveTask",
					data:{
						"task_id":_id,
						"receiver_icon":this.user_data.icon,
						"receiver_id":this.user_data.user_id,
						"receiver_name":this.user_data.user_name,
						"receiver_address":this.user_data.address,
						"receiver_phone":this.user_data.phone
						},
					success(res) {
						uni.hideLoading();
						that.lists[index].is_received=true
					}
				 })
			 },
			getTasks(page, page_size){
				var that=this;
				
				uni.showLoading();
				uniCloud.callFunction({
					name:"getTasks",
					data:{
						"page":page,
						"page_size":page_size
					},
					success(res) {
						uni.hideLoading()
						let l=res.result.lists;
						that.lists=that.lists.concat(l);

					}
				})


			},


		}
			
	}
</script>

<style scoped>
	/* 导航栏 */
	.tasks{
		margin:10%;
	}
	.task{
		width: 100%;

		border-radius: 10px 10px;
		background: white;
		padding: 3%;
		display: flex;
		flex-direction: column;
	}

	.top{
		display: flex;
		flex-direction: row;
		font-size: 6px;
	}
	.icon image{
		width: 50px;
		height: 50px;
		border-radius: 50px 50px;
	}
	.user-info{
		margin-left: 3%;
	}
	.address{
		
	}
	.publish-task{
		width: 50px;
		height: 50px;
		background: #34ca20  !important;
		position: fixed;
		color: #FFFFFF !important;
		left: 80%;
		bottom: 20%;

	}
	.bottom button{
		width: 20%;
		margin-top: 2%;
		margin-right: 2%;
		font-size: 10px;
		background: #0081FF;
		color: white;
	}
	.middle{
		width: 98%;

		margin: 2% auto 2% auto;
		padding: 4%;
		border-radius: 10px 10px;
		background: #fefdf4;
	}
	.content{
		border-bottom: #007AFF 1px solid;
	}
	.gain{
		text-align: right;
		color: red;
		font-size: 22px;
	}
</style>
